<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link rel="shortcut icon" type="image/x-icon" href="./images/lightning_green.png">
  <link rel="stylesheet" type="text/css" href="./css/waves.min.css?v=0.7.5">
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <title>IHeader</title>
  <style>
    ::-webkit-scrollbar {width:6px;height:10px;}
    ::-webkit-scrollbar-thumb {background-color: #FFDEAD;border-radius: 5px;}
    ::-webkit-scrollbar-thumb:hover{background-color: #F4A460;transition:background 2s;}
    
    body {
      margin: 0;
      font-size: 12px;
      display: flex;
      flex-direction: column;
    }
    header {
      height: 50px;
      padding-left: 12px;
      background-color: #88C741;
      box-shadow: 0px 1px 8px #abd27f;
      font-size: 18px;
      font-weight: 500;
      line-height: 50px;
    }
    .search, .listener-search {
      width: 120px;
      height: 16px;
      margin-left: 50px;
      padding: 3px 9px;
      background-color: #70b522;
      border-radius: 3px;
      border:0 none;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.15);
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 12px;
      font-weight: normal;
      line-height: 1;
      color: #FFFFFF;
      transition: width .5s;
      vertical-align: middle;
    }
    .search:focus, .listener-search:focus {
      width: 160px;
      background-color: #FFFFFF;
      border: 0 none;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
      color: #333333;
      outline: 0 none;
      text-shadow: 0 1px 0 #FFFFFF;
    }
    .menu {
      box-sizing: border-box;
      padding: 10px;
      font-size: 14px;
      color: #999;
    }
    .menu input[type="checkbox"] {
      width: 14px;
      height: 14px;
      margin-left: 10px;
      outline: none;
      vertical-align: middle;
    }
    .menu input[type="checkbox"]:hover, .menu img:hover {
      box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.5);
    }
    .menu input[type="checkbox"]:active, .menu img:active {
      box-shadow: 0px 0px 25px -3px rgba(0,0,0,0.8);
    }
    .menu .clear {
      margin-right: 5px;
      opacity: 0.7;
    }
    .menu label {
      cursor: pointer;
      user-select: none;
    }
    .action {
      position: absolute;
      width: 30px;
      height: 30px;
      right: 0;
      padding: 10px;
      line-height: 30px;
      text-align: center;
      font-size: 21px;
      color: white;
      transform: rotate(90deg);
    }
    .action:hover {
      background: rgba(0,0,0,0.1);
    }
    .action:active {
      background: rgba(0,0,0,0.2);
    }
    #main {
      position: relative;
      width: 600px;
      min-height: 50px;
    }
    #main > div {
      counter-reset: section;
    }
    .counter {
      counter-increment: section;
    }
    .counter::before {
      content: counter(section);
    }
    #main > div, #listener .table-box {
      position: relative;
      height: 400px;
    }
    #main .table-box {
      position: relative;
      height: 360px;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .listener td:nth-child(3) > div {
      padding-right: 4%;
      max-height: 45px;
      text-align: left;
      word-break: break-all;
      overflow-y: auto;
    }
    .listener .headers td:last-child {
      text-align: center;
    }
    .listener .headers td:nth-child(2){
      width: 300px;
    }
    .listener .revert {
      visibility: hidden;
    }
    .listener tr:not(.header-box):hover .revert {
      visibility: visible;
    }
    table {
      width: 100%;
      border-collapse: collapse;
    }
    .hand {
      margin: 0 5px;
      width: 590px;
    }
    .headers table {
      width: 570px;
      margin: 0 auto;
    }
    tr:not(.title):not(.header-box):hover {
      cursor: pointer;
      background-color: #FDF5E6;
    }
    .headers tr{
      cursor: auto !important;
    }
    td{
      padding: 5px;
      text-align: center;
      /*border: 1px dashed lightgray;*/
    }
    td:nth-child(2) > div {
      /*width: 290px;*/
      max-height: 45px;
      text-align: left;
      word-break: break-all;
      overflow-y: auto;
    }
    /*#listener td:nth-child(2) > div {*/
      /*width: 300px;*/
    /*}*/
    td:nth-child(2) > div > span, td:nth-child(3) > div > span {
      color: red;
    }
    td div {
      overflow-x: hidden;
    }
    #container .status {
      background-color: #dff0d8;
    }
    #listener .status {
      text-align: center;
    }
    .headers .delete-status {
      color: red;
    }
    .headers .modify-status {
      color: #ea932b;
      position: relative;
    }
    #container tr:hover .status, #container .status:hover {
      background-color: #d0e9c6;
    }
    .headers {
      padding-bottom: 15px;
      border: none;
    }
    .headers th {
      height: 25px;
    }
    .headers td {
      text-align: left;
      color: #999999;
      border: 2px dashed lightgray;
      line-height: 16px;
    }
    .headers td:first-child {
      width: 100px;
      color: coral;
    }
    .headers td a, #allListener > tr > td > a {
      position: absolute;
      display: none;
      width: 14px;
      height: 14px;
      top: 50%;
      right: 12px;
      margin: -7px 0 0 -2px;
      text-align: center;
      line-height: 14px;
      cursor: pointer;
      color: #666;
      border-radius: 50%;
      user-select: none;
    }
    .headers tr:hover a, #allListener > tr:hover a {
      display: inline-block;
    }
    .headers .edit-header {
      position: relative;
      width: 100%;
      box-sizing: border-box;
    }
    .headers .edit-model .edit-header {
      padding-right: 4%;
      color: initial;
      outline: none;
    }
    .headers .add-model .edit-header {
      padding-right: 22%;
    }
    .headers .add-model a {
      width: 20%;
      border-radius: 0;
      cursor: inherit;
    }
    .add-model td:first-child > div {
      max-height: 42px;
      text-align: left;
      word-break: break-all;
      overflow-y: auto;
      outline: none;
      color: initial;
    }
    #container .headers .add-model a:hover, #container .headers .add-model a:active {
      color: initial;
      background: none;
    }
    .selected {
      background-color: #FFE4C4 ;
    }
    .selected:hover {
      background-color: #FFDEAD !important;
    }
    .selected ::-webkit-scrollbar-thumb {
      background-color: #F4A460;
    }
    .selected:hover .status {
      background-color: #39a511;
    }
    tr.selected .status {
      background-color: #5bbf36;
    }
    .headers .edit-model .modified {
      color: #f79208;
    }
    .edit-model {
      position: relative;
    }
    .btn {
      margin-left: 10px;
    }
    .add-btn {
      float: right;
      cursor: pointer;
      user-select: none;
    }
    .add-model a{
      float: right;
      width: 20%;
      height: 16px;
    }
    .ok {
      color: #70B522;
      cursor: pointer;
    }
    .cancel {
      color: #867f82;
      cursor: pointer;
    }
    .tips {
      line-height: 400px;
      color: #bbb;
      text-align: center;
      white-space: nowrap;
      user-select: none;
    }
    .toast {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -12px;
      margin-left: -63px;
      padding: 5px 8px;
      border-radius: 5px;
      font-size: 12px;
      line-height: 12px;
      text-align: center;
      color: #FFFFFF;
      background: rgba(112, 181, 34,.6);
      transition: all 1s ease;
      user-select: none;
    }
    .shadow {
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      top: 0;
      bottom: 0;
      left:0;
      opacity: .2;
    }
    .nav-tabs {
      margin: 10px 0;
      padding: 0 10px;
      border-bottom: 1px solid #ddd;
      list-style: none;
    }
    .nav-tabs li {
      float: left;
      margin-bottom: -1px;
    }
    .nav-tabs a {
      display: block;
      margin-right: 2px;
      padding: 8px;
      border-radius: 4px 4px 0 0;
      border: 1px solid transparent;
      cursor: pointer;
      user-select: none;
    }
    .nav-tabs > li > a:hover {
      border-color: #eeeeee #eeeeee #dddddd;
    }
    .nav-tabs > li > a:hover {
      background-color: #eeeeee;
    }
    .nav-tabs > .active > a, .nav-tabs > .active > a:hover {
      color: #555555;
      cursor: default;
      background-color: #ffffff;
      border: 1px solid #ddd;
      border-bottom-color: transparent;
    }
    a {
      color: #0088cc;
      text-decoration: none;
    }
    body .active {
      display: block !important;
    }
    .display-none {
      display: none !important;
    }
    .error {
      outline: 1px dashed red !important;
    }
    .listener-search, .listener, .tab-toggle .search, .tab-toggle .container{
      display: none;
    }
    .tab-toggle .tab-listener, .tab-toggle .listener {
      display: block
    }
    .tab-toggle .listener-search {
      display: inline-block;
    }
    .global-switch {
      margin-left: 10px;
      font-size: 10px;
    }
    .icon-ok[disabled] + .global-switch, .icon-ok[disabled] ~ label {
      display: none;
    }
    .dialog .box{
      position: absolute;
      display: flex;
      flex-direction: column;
      left: 50%;
      top: 50%;
      width: 400px;
      height: 300px;
      box-shadow: 0 0 10px 1px rgba(0,0,0,0.5);
      background: #fff;
      border-radius: 3px;
      transform: translate(-50%, -40%);
    }
    .box header {
      position: relative;
      height: 40px;
      line-height: 40px;
      background: #ccc;
      box-shadow: 0px 1px 8px #ccc;
      font-size: 15px;
      user-select: none;
    }
    .box header .icon {
      margin-left: 10px;
    }
    .box header .icon-remove {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translate(0, -50%);
    }
    .box .content {
      flex: 1;
      margin: 10px 0;
      overflow-y: auto;
      counter-reset: section;
    }
    .box .setting {
      margin-top: 15px;
      padding-left: 10px;
      user-select: none;
    }
    .box .setting label {
      cursor: pointer;
    }
    .content .proxy-item {
      position: relative;
      padding-left: 20px;
      user-select: none;
      counter-increment: section;
    }
    .proxy-item::before {
      content: counter(section);
      position: absolute;
      margin-left: -10px;
      line-height: 30px;
      color: #808080;
    }
    .proxy-item .arrow-right:hover {
      opacity: 0.7;
      cursor: default;
    }
    .proxy-item .text {
      width: 39%;
      height: 16px;
      margin: 0 3px;
      padding: 6px 1%;
      font-size: 12px;
      border: none;
      outline: none;
    }
    .proxy-item .text.edit {
      color: #f79208;
    }
    .proxy-item .icon-remove {
      display: none;
    }
    .proxy-item:hover .icon-remove {
      display: inline-block;
    }
    .bg-shadow {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0,0,0,0.1);
    }
    .align-right {
      text-align: right;
    }
  </style>
  </head>
  <body>
    <header>
      <span class="title">IHeader</span>
      <input type="text" id="search" class="search display-none" placeholder="search">
      <input type="text" id="listenerSearch" class="listener-search display-none" placeholder="search">
      <a id="more" class="action">···</a>
    </header>
    <ul class="nav-tabs">
      <li class="tab-current active">
        <a data-href="container">Current Page</a>
      </li>
      <li class="tab-listener">
        <a data-href="listener">All Listener</a>
      </li>
    </ul>
    <div id="main">
      <div id="container" class="container">
        <div id="menu" class="menu display-none">
          <i id="clear" class="icon-ban-circle icon clear" title="clear"></i>
          <input type="button" id="preserve_log" class="icon-star-empty icon star"/> <label for="preserve_log">preserve log</label>
          <input type="button" id="globalSwitch" class="icon-star-empty icon star global-switch"/> <label for="globalSwitch">是否创建全局监听器</label>
        </div>
      </div>
      <div id="listener" class="listener">
      </div>
    </div>
    <div id="shadow" class="shadow"></div>
    <div id="settingDialog" class="dialog display-none">
      <div id="bg-shadow" class="bg-shadow"></div>
      <div class="box">
        <header>
          Host Proxy Settings
          <a id="addProxyBtn" class="icon-plus icon" title="Add proxy rule"></a>
          <input type="button" id="confirmProxyBtn" class="icon-ok icon" title="save proxy rule"/>
          <a id="settingsCloseBtn" class="icon-remove icon" title="close dialog"></a>
        </header>
        <div class="setting">
          <input type="checkbox" id="proxySwitch">
          <label for="proxySwitch">Check to enable proxy</label>
        </div>
        <div id="settingsContent" class="content">
          <div class="proxy-item display-none">
            <input type="text" class="text align-right host" placeholder="www.test.com"/>
            <a class="icon-arrow-right icon arrow-right"></a>
            <input type="text" class="text proxy-host" placeholder="127.0.0.1"/>
            <a class="icon-remove icon"></a>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="./js/waves.min.js?v=0.7.5"></script>
  <script type="text/javascript" src="./js/index.js"></script>
</html>